<template>
	<div>
		<div>
			<span>来自于:</span>
			<!-- 下拉菜单要绑定在select上 -->
			<select v-model="from">
				<option value="北京市">北京</option>
				<option value="南京市">南京</option>
				<option value="天津市">天津</option>
			</select>
		</div>

		<div>
			<!-- (重要)
				遇到复选框, v-model的变量值
				非数组 - 关联的是复选框的checked属性
				数组   - 关联的是复选框的value属性
			-->
			<span>爱好:</span>
			<input type="checkbox" v-model="hobby" value="抽烟"/>
			抽烟
			<input type="checkbox" v-model="hobby" value="喝酒"/>
			喝酒
			<input type="checkbox" v-model="hobby" value="写代码"/>
			写代码
		</div>

		<div>
			<span>性别:</span>
			<input type="radio" value="男" name="sex" v-model="gender"/>
			男
			<input type="radio" value="女" name="sex" v-model="gender"/>
			女
		</div>
		<div>
			<span>自我介绍</span>
			<textarea v-model="intro"></textarea>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			// 下拉菜单的数据
			from: '南京市',//*可设置默认选择选项
			// 爱好数据
			hobby: [],
			// 性别数据
			gender: '',
			// 自我介绍数据
			intro: '',
		}
	},
}
</script>

<style></style>
